<template>
  <section>
    <div style="position: fixed;top: 0;width: 100%;background: #fff;z-index: 99;height: 1.5rem">
      <yd-cell-item>
        <<img slot="left" src="../../assets/sech/back.png" @click="backSearch()"
              style="width: .5rem;height:.6rem;margin-right: .2rem;">
        <yd-input slot="right" required :show-success-icon="false" :show-error-icon="false" v-model="searchContent"
                  max="20" placeholder="请输入查找信息" @keyup.13.native="searchKey()"></yd-input>
        <img slot="right" src="../../assets/sech/search.png" style="width: .6rem;height:.6rem;" @click="searchBtn()">
      </yd-cell-item>
      <span class="top_tips">为您搜索到相关公司<span style="color: red">{{count}}</span>个</span>
    </div>

    <div style="margin-top: 1.6rem;" class="list_cont">
      <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" style="background: #fff;">

        <div class="list_item" slot="list" v-for="(item,index) in list" :key="index" @click="detailInfo(item)"
             v-if="index<PAGECOUNT">
          <ul>
            <li class="list_info" style="margin-top: 0">
              <span style="font-size: .30rem;font-weight: bold;text-align: left;">{{item.name}}</span>
            </li>
            <li class="list_info">
              <span style="width: 1.4rem;flex: none;">法定代表人</span>
              <span style="text-align: right;">{{item.legalPersonName}}</span>
            </li>
            <li class="list_info">
              <span>注册日期</span>
              <span>{{item.estiblishTime}}</span>
            </li>
            <li class="list_info">
              <span>注册资本</span>
              <span>{{item.regCapital}}</span>
            </li>
            <li class="list_info" style="border-bottom: 1px solid #f2f2f2;" v-if="item.phoneNumber != undefined">
              <span>电话</span>
              <span>{{item.phoneNumber}}</span>
            </li>
          </ul>
        </div>
        <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">换个关键词再试试看</span>

      </yd-infinitescroll>
    </div>

    <div v-if="isNoShow" class="is_noshow">
      <img src="../../assets/sech/no_tip.png" style="width: 4rem;">
      <ul>
        <li style="font-size: .32rem;font-weight: bold;">抱歉，没有找到相关信息</li>
        <li>1.输入的关键词不准确？</li>
        <li>2.输入的关键词过于宽泛？</li>
        <li>3.换个关键词再试试看</li>
      </ul>
    </div>

    <payPart :show-wrap="iswrap" :need-param="param" :product-title="title" :product-price="price" :api-logo="apilogo"></payPart>

  </section>
</template>

<script>
  import payPart from '@/components/api/pay_part';
  export default {
    name: 'companyList',
    data() {
      return {
        searchContent: '',
        count: '',
        page: 2,
        pageSize: 10,
        list: [],
        isNoShow: false,
        top: 0,
        accuratetex: '',
        PAGECOUNT: 10,
        apilogo:'',
        price:'',
        title:'企业工商风险查询',
        param:{},
        iswrap:false,
      }
    },
    components:{
      payPart
    },
    methods: {
      searchKey() {
        this.$options.methods.searchBtn.bind(this)();
      },
      detailInfo(item) {
        this.$dialog.loading.open('正在校验信息');
        setTimeout(()=>{
        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            this.$dialog.loading.close();
            if(response.data.code != 200){
              this.$dialog.confirm({
                title: '尚未登录，是否前往登录页面',
                mes: '',
                opts: () => {
                  this.$router.push('/login')
                }
              });
            }else{
              this.iswrap = !this.iswrap;
              this.param.name = item.name;
              this.param.pid = '28';
            }
          }).catch(()=>{
        })
        },500)
      },
      backSearch() {
        this.$router.push('/index');
      },
      loadList() {
        const that = this;
        if (this.PAGECOUNT == 10) {
          setTimeout(() => {
            that.PAGECOUNT = 20;
            that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          }, 500)
          return;
        }
        that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
      },
      searchBtn() {
        const that = this;
        if (this.searchContent == '' || this.searchContent.length < 4) {
          this.$dialog.notify({
            mes: '请输入完整的企业名称',
            timeout: 1500,
          });
          return;
        }
          that.$dialog.loading.open('正在搜索');
          setTimeout(() => {
            that.$router.push({
              path: '/company_list',
              query: {
                content: that.searchContent,
              }
            })
            that.$ajax.post(window.g.apiUrl+'/index/searchAll.do', JSON.stringify({
              param: that.searchContent,
              pageNum: 1,
            })).then((response) => {
              that.$dialog.loading.close();
              if (response.data.code == 200) {
                document.getElementsByClassName('list_cont')[0].scrollTop = 0;
                if (response.data.result.total == 0 || response.data.result.total == undefined) {
                  that.isNoShow = true;
                  that.list = [];
                  that.count = 0;
                } else {
                  that.PAGECOUNT = 10;
                  that.isNoShow = false;
                  response.data.result.items.forEach((val, oldval) => {
                    val.estiblishTime = val.estiblishTime.substr(0, 10);
                  })
                  if(response.data.result.total == 20){
                    that.count = '20+'
                  }else{
                    that.count = response.data.result.total;
                  }
                  that.list = response.data.result.items;
                }
              }
            }).catch(() => {
            })
          }, 150)
      }
    },
    created() {
      const that = this;
      let content = that.$route.query.content;
      that.searchContent = content;
      that.$dialog.loading.open('正在搜索');
      setTimeout(() => {
        that.$ajax.post(window.g.apiUrl+'/index/searchAll.do', JSON.stringify({
          param: content,
          pageNum: 1,
        })).then((response) => {
          that.$dialog.loading.close();
          if (response.data.code == 200) {
            if (response.data.result.total == 0 || response.data.result.total == undefined) {
              that.isNoShow = true;
              that.list = [];
              that.count = 0;
            } else {
              that.isNoShow = false;
              response.data.result.items.forEach((val, oldval) => {
                val.estiblishTime = val.estiblishTime.substr(0, 10);
              })
              if(response.data.result.total == 20){
                that.count = '20+'
              }else{
                that.count = response.data.result.total;
              }
              that.list = response.data.result.items;
            }
          }

        }).catch(() => {
        })
      }, 150)

    },
    mounted(){
      const that = this;
      this.$ajax.post(window.g.apiUrl+'/alipay/getProduct.do',JSON.stringify({
        type:'B',
      })).then((response)=>{
        if(response.data.code == 200){
          let arr = response.data.data;
          for(var i = 0;i<arr.length;i++){
            if(arr[i].id == '28'){
              that.price = arr[i].price;
              that.apilogo = arr[i].iconurl;
            }
          }
        }else{
          that.$dialog.notify({
            mes: '信息获取超时，请稍后重试',
            timeout: 1500,
          });
        }


      }).catch(()=>{
      })
    },
    activated() {
      document.getElementsByClassName('list_cont')[0].scrollTop = this.top;
    },
    deactivated() {
      this.top = document.getElementsByClassName('list_cont')[0].scrollTop;
    },
  }
</script>

<style scoped>
  .top_tips {
    font-size: .24rem;
    width: 100%;
    text-align: left;
    display: block;
    padding-left: .54rem;
    margin-top: .1rem;
  }

  .list_item {
    width: 96%;
    box-shadow: .1px .1px 3px 1px rgba(128, 128, 128, .2);
    margin-left: 2%;
    margin-top: .3rem;
    margin-bottom: .3rem;
    padding: .2rem .2rem .1rem .2rem;
  }

  .list_item:active {
    background: rgba(128, 128, 128, .04);
  }

  .list_info {
    display: flex;
    justify-content: space-between;
    padding: .16rem 0;
    align-items: flex-start;
  }

  .list_info_down {
    display: flex;
    align-items: flex-start;
    padding-top: .1rem;
  }

  .is_noshow {
    position: absolute;
    top: 2.5rem;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .is_noshow ul {
    color: #808080;
    line-height: .55rem;
    text-align: left;
    margin-top: .2rem;
  }

  .no_search_tip {
    height: .6rem;
    border: 1px solid #e3e3e3;
    padding-left: .2rem;
    margin-right: .1rem;
    width: 3.8rem;
  }
</style>
